<template>
	<view class="my-account">
		
		<!-- 购物车为空 -->
		<view v-if="dishbox.length === 0" class="empty">
			<image src="/static/emptyCart.jpg" mode="aspectFit"></image>
			<view v-if="token" class="empty-tips">
				您还没有兑换菜箱
				<navigator class="navigator" v-if="token" url="../category/category" open-type="switchTab">立即兑换></navigator>
			</view>
			<view v-else class="empty-tips">
				空空如也
				<view class="navigator" @tap="navTo('/pages/public/logintype')">去登陆></view>
			</view>
		</view>

		<!--菜箱信息列表-->
		<view v-for="box in dishbox" class="dishbox">
			<view class="header">
				<view class="account">
					<view class="assets">
						<view>菜箱名称</view>
						<view class="money">
							<!--{{ userInfo && userInfo.account && userInfo.account.user_money || '豪华年卡' }}-->
							{{box.dishbox.title}}
						</view>
					</view>
					<text @tap="navTo('/pages/user/dishboxDish?dishbox_id=' + box.dishbox.id + '&order_id='+box.id)" class="recharge" v-bind:id="box.id">点击选菜</text>
				</view>
				<view class="cumulative">
					<view class="item">
						<view>配送次数</view>
						<view class="money">
							<!--{{ userInfo && userInfo.account && userInfo.account.accumulate_money || '0.00' }}-->
							{{box.delivery_num}}
						</view>
					</view>
					<view class="item">
						<view>已配送次数</view>
						<view class="money">
							{{box.delivery_yi_num}}
						</view>
					</view>
				</view>
				<view class="header-bg">
					<image src="/static/accountBg.png" mode="aspectFill"></image>
				</view>
			</view>
			<!--余额/
			<view class="nav">
				<view class="item" @tap="navTo('/pages/user/bill')">
					<image src="/static/record1.png" />
					<text>配送记录</text>
				</view>
				<view class="item" @tap="navTo('/pages/user/bill')">
					<image src="/static/record3.png" />
					<text>兑换记录</text>
				</view>
			</view> 积分导航-->
			<!--引导跳转组件-->
			<!--<Home></Home>-->
		</view>
		<!--加载动画-->
		<rf-loading v-if="loading"></rf-loading>
	</view>
</template>

<script>
	/**
	 * @des 菜箱获取
	 *
	 * @author stav 1099221484@qq.com
	 * @date 2020-03-30 17:17
	 * @copyright 2020
	 */
	import Home from '@/components/rf-back-home/rf-back-home';
	import {
		couponClear,
		MydishboxList
	} from "@/api/userInfo";
	import rfLoadMore from '@/components/rf-load-more/rf-load-more';
	import empty from "@/components/empty";
	import moment from '@/utils/moment';
	import uniDrawer from '@/components/uni-drawer/uni-drawer'
	import uniList from '@/components/uni-list/uni-list'
	import uniListItem from '@/components/uni-list-item/uni-list-item';


	export default {
		components: {
			rfLoadMore,
			empty,
			uniDrawer,
			uniList,
			uniListItem
		},
		data() {
			return {
				headerTop: 0,
				//控制滑动效果
				typeClass: 'valid',
				theIndex: null,
				oldIndex: null,
				state: 1,
				isStop: false,
				token: null,
				couponList: [],
				userInfo: {},
				dishbox: [],
				loadingType: 'more',
				loading: true,
				xinqi: [
					{
						value: '0',
						name: '星期日'
					},
					{
						value: '1',
						name: '星期一'
					},
					{
						value: '2',
						name: '星期二'
					},
					{
						value: '3',
						name: '星期三'
					},
					{
						value: '4',
						name: '星期四'
					},
					{
						value: '5',
						name: '星期五'
					},
					{
						value: '6',
						name: '星期六'
					}],
			}
		},
		onPageScroll(e) {
			//兼容iOS端下拉时顶部漂移
			this.headerPosition = e.scrollTop >= 0 ? "fixed" : "absolute";
			this.headerTop = e.scrollTop >= 0 ? null : 0;
			this.statusTop = e.scrollTop >= 0 ? null : -this.statusHeight + 'px';
		},
		onLoad() {
			this.initData();
		},
		filters: {
			// 格式化时间
			time(val) {
				return moment(val * 1000).format('YYYY-MM-DD')
			},
			// 格式化时间
			timeFull(val) {
				return moment(val * 1000).format('YYYY-MM-DD HH:mm:ss')
			}
		},
		methods: {
			// 初始化数据
			initData() {
				this.token = uni.getStorageSync('accessToken') || undefined;
				if (this.token) {
					this.userInfo = uni.getStorageSync('userInfo') || undefined;
					this.getMyDishboxList();
				} else {
					this.loading = false;
				}
			},

			//统一跳转接口
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			// 获我的菜箱列表
			async getMyDishboxList(type) {
				await this.$get(`${MydishboxList}`, {
					//暂时没有参数
				}).then(r => {
					this.loading = false;
					if (type === 'refresh') {
						uni.stopPullDownRefresh();
					}
					this.loadingType = r.data.length === 10 ? 'more' : 'nomore';
					this.dishbox = r.data
				}).catch(() => {
					if (type === 'refresh') {
						uni.stopPullDownRefresh();
					}
					this.loading = false;
				});
			},
			
			async getSday(str){
				switch(str){
					case 1:
					    return '星期一';
						break;
					case 2:
						return '星期二';
						break;
					case 3:
						return '星期三';
						break;
					case 4:
						return '星期四';
						break;
					case 5:
						return '星期五';
						break;
					case 6:
						return '星期六';
						break;
					case 7:
						return '星期日';
						break;							
				}
			},
			async getSstr(str){
				if(str.indexOf(',') != -1){
					var s;
					var strs = new Array(); //定义一数组
					strs = str.split(',');
					for (var i in strs) {
						s = this.getSday(strs[i]) + ' ';
					}
					return s;
				}else{
					return this.getSday(str);
				}
			}
			
		}
	}
</script>
<style scoped lang="scss">
	page {
		background-color: $page-color-bg;
	}
	
	.dishbox{
		padding: 20upx 0 20upx 0;
	}

	.my-account {
		padding: 32upx 20upx;
		width: 100%;

		.header {
			padding: 30upx;
			height: 320upx;
			background-image: linear-gradient(to right, #33CC00 0, #33CC33 40%);
			border-radius: 20upx;
			color: rgba(255, 255, 255, 0.6);
			font-size: $font-sm;
			position: relative;

			.account {
				width: calc(100% - 60upx);
				display: flex;
				position: absolute;
				z-index: 2;
				justify-content: space-between;

				.assets {
					.money {
						color: #fff;
						font-size: $font-lg;
						margin: 0;
					}
				}

				.recharge {
					font-size: $font-base;
					width: 150upx;
					height: 54upx;
					line-height: 54upx;
					border-radius: $font-base;
					background-color: #fff9f8;
					text-align: center;
					color: $base-color;
					margin-top: 10upx;
				}
			}

			.cumulative {
				width: calc(100% - 240upx);
				position: absolute;
				bottom: 20upx;
				display: flex;
				justify-content: space-between;

				.money {
					color: #fff;
					font-size: $font-lg;
					margin: 0;
				}
			}

			.header-bg {
				position: absolute;
				width: 100%;
				height: 320upx;
				z-index: 1;
				top: 0;

				image {
					width: 100%;
					height: 320upx
				}
			}
		}

		.nav {
			border-bottom: 1px solid #f5f5f5;
			display: flex;

			.item {
				flex: 1;
				margin: 20upx;
				font-size: $font-base - 4upx;
				display: inline-block;
				text-align: center;
				color: #999;

				image {
					display: block;
					width: 44upx;
					height: 44upx;
					margin: 10upx auto;
				}
			}
		}

		.advert {
			display: flex;

			.item {
				background-color: #fff6d1;
				flex: 1;
				border-radius: 24upx;
				padding: 10upx 0;
				margin: 20upx 10upx;
				color: #e44609;
				display: flex;
				justify-content: space-between;

				image {
					width: 78upx;
					height: 78upx;
					margin-right: 20upx;
				}

				.text {
					margin-left: 20upx;

					.name {
						font-size: $font-base;
						font-weight: bold;
						height: 40upx;
						color: #f33c2b;
					}

					.desc {
						font-size: $font-sm - 2upx;
					}
				}
			}

			.on {
				background-color: #fff3f3;
			}
		}
	}

	.place {
		background-color: #ffffff;
		height: 100upx;
		/*  #ifdef  APP-PLUS  */
		margin-top: var(--status-bar-height);
		/*  #endif  */
	}

	.empty {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		padding-bottom: 100upx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background: #fff;

		image {
			width: 240upx;
			height: 160upx;
			margin-bottom: 30upx;
		}

		.empty-tips {
			display: flex;
			font-size: $font-sm+2upx;
			color: $font-color-disabled;

			.navigator {
				color: $uni-color-primary;
				margin-left: 16upx;
			}
		}
	}
</style>
